<h1 mat-dialog-title>
  <span class="title">{{ 'MEMBER.ADD' | translate }}</span>
</h1>

<div mat-dialog-content>
  <p class="desc cnsl-secondary-text">{{ 'ORG_DETAIL.MEMBER.ADDDESCRIPTION' | translate }}</p>

  <ng-container *ngIf="showCreationTypeSelector">
    <cnsl-form-field class="full-width">
      <cnsl-label>{{ 'MEMBER.CREATIONTYPE' | translate }}</cnsl-label>
      <mat-select [(ngModel)]="creationType" (selectionChange)="loadRoles()">
        <mat-option *ngFor="let type of creationTypes" [value]="type.type" [disabled]="(type.disabled$ | async) === false">
          {{ 'MEMBER.CREATIONTYPES.' + type.type | translate }}
        </mat-option>
      </mat-select>
    </cnsl-form-field>

    <ng-container *ngIf="creationType === CreationType.PROJECT_OWNED || creationType === CreationType.PROJECT_GRANTED">
      <p>{{ 'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate }}</p>
      <cnsl-search-project-autocomplete
        class="block"
        (selectionChanged)="selectProject($event)"
        [autocompleteType]="
          creationType === CreationType.PROJECT_OWNED
            ? ProjectAutocompleteType.PROJECT_OWNED
            : creationType === CreationType.PROJECT_GRANTED
              ? ProjectAutocompleteType.PROJECT_GRANTED
              : undefined
        "
      >
      </cnsl-search-project-autocomplete>
    </ng-container>
  </ng-container>

  <cnsl-search-user-autocomplete [users]="preselectedUsers" (selectionChanged)="users = $any($event)">
  </cnsl-search-user-autocomplete>

  <div class="roles-selection">
    <mat-checkbox
      class="role-cb"
      *ngFor="let role of memberRoleOptions"
      color="primary"
      (change)="toggleRole(role)"
      [checked]="roles.includes(role)"
    >
      <div class="role-cb-content">
        <div class="cnsl-chip-dot" [style.background]="getColor(role)"></div>
        <span data-e2e="role-checkbox">{{ role | roletransform }}</span>
        <i class="info-hover las la-question-circle" matTooltip="{{ 'MEMBERROLES.' + role | translate }}"></i>
      </div>
    </mat-checkbox>
  </div>
</div>
<div mat-dialog-actions class="action">
  <button mat-stroked-button (click)="closeDialog()">
    {{ 'ACTIONS.CANCEL' | translate }}
  </button>

  <button
    [disabled]="users.length === 0 || roles.length === 0"
    color="primary"
    mat-raised-button
    class="ok-button"
    (click)="closeDialogWithSuccess()"
    data-e2e="confirm-add-member-button"
  >
    {{ 'ACTIONS.ADD' | translate }}
  </button>
</div>
